前言

  一门编程语言 ~= 语法 + 标准库 + 开发范式。
  一个程序 ~= 数据结构 + 算法。

  标准库，在js中即为标准的内置对象，这些对象或对象的原型上内置了很多方法和属性，这些写好了的东西，我们也常常称之为“api”。

  如果掌握标准库中的api，并能灵活运用，就像 “熟读唐诗三百首，不会做诗也会吟” 。可以不再自己手动实现、依赖第三方插件，能为开发节省大量的时间。

转换为数组： Array.from

Array.from将伪数组或可迭代对象转换为一个新的数组

  • 第一个参数是待转换的伪数组或可迭代对象,第二个参数是一个函数，相当于内置的map函数,第三参数是map函数中this指向。
  • 伪数组：Nodelist 、arguments
  • 可迭代对象：可以理解为任何可以被循环的对象，例如数组、Set，Map，字符串也可以被迭代。
1
2
3
4
5
6
let arrNodeList = Array.from(document.querySelectorAll('div'));
console.log(arrNodeList);// dom对象组成的数组

let arrStr =  Array.from('我是字符串啊');
console.log(arrStr);
//["我", "是", "字", "符", "串", "啊"]

eg：在函数中,将所有传入的参数进行平方计算,且过滤掉非Number类型数据,返回计算后的值组成的数组。第二个参数用于迭代的map函数需要 return。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function fun(){
    let arrAllArg = Array.from(arguments,function(item,index){
        if(!isNaN(item)){
            return item**2;
        }else{
             return null;
        }
    });
     console.log(arrAllArg);
    // arguments不能使用数组方法。转换后arrArg是数组了
   let arrArg =  arrAllArg.filter(item => Boolean(item)==true)
    console.log(arrArg);
}
fun(1,2,3,6,'a')
//[1, 4, 9, 36,"a"]
//[1, 4, 9, 36]

过滤数组：filter

过滤掉数组中不满足条件的元素，返回剩下的元素组成的新数组。不会改变原数组。

  • 参数是回调函数,返回false则过滤掉该元素
  • 第二个参数为回调函数中this的指向
  • 回调函数三个参数分别表示 当前迭代的元素、索引值、调用filter的原数组。

eg：返回位于Asia，且area大于一百万平方千米的国家的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let arrData = [{
    "continent": "Asia",
    "area": 9634057,
    "cname": "中国",
    "phoneCode": "86",  
},{
    "continent": "Asia",
    "area": 647500,
    "cname": "阿富汗",
    "phoneCode": "93",
},{
    "continent": "North America",
    "area": "9379091",
    "cname": "美国",
    "phoneCode": "1", 
}];
let arrCountryData = arrData.filter(function(item,index){
    return item['continent']=='Asia' && item['area']>1000000;
});
console.log(arrCountryData);
//[{"continent": "Asia","area": 9634057,  "cname": "中国", "phoneCode": "86"}]
}

数组中是否存在某元素 includes

扁平化嵌套的数组 flat

一个普通标题 一个普通标题 一个普通标题
短文本 中等文本 稍微长一点的文本
稍微长一点的文本 短文本 中等文本